<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字练习</title>
</head>
<body>

打字练习: <div id="div" class="text">select from where a=b hhh</div>
<input id="inputs" type="text" placeholder="请输入上方的文字">
<button onclick="sub()" type="button">提交</button>
<div id="end"></div>
</body>
<script>


    function sub(){
        //获取模板中的文字
        let div = document.getElementById("div").innerText;
        //获取输入框中的文本
        let input = document.getElementById("inputs").value;
        let end = document.getElementById("end");
        let count=0;//定义错误次数

        let str = "";
        for(i=0;i<div.length;i++){
            if(div[i]!=input[i]){
                //错误
                count++;
                str += '<span style="background-color: red">'+div[i]+'</span>';
            }
        }
       /* //获取刚刚按下的值
        let s = input.substr(input.length-1);*/
        document.getElementById("div").innerHTML=str;
        end.innerText= "错误次数为："+count;
    }




</script>
</html>